<template>
  <view class="page">
    <view class="OrderCancellation">
      <view
        class="header"
        :style="{
          'background-image': `url(${domain}/static/images/cancellation-header.png)`,
        }"
      >
      </view>
      <view>
        <view style="padding: 30rpx; background-color: white">
          <view><span style="color: red">*</span>上传视频</view>
          <view>
            <view
              @click="uploadVideo"
              v-if="!videoSrc"
              style="
                height: 200rpx;
                width: 200rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
                border: 1rpx dashed gray;
                margin-right: 20rpx;
                margin-top: 20rpx;
              "
            >
              点击上传</view
            >
            <video
              v-else
              :src="videoSrc"
              controls
              style="width: 200rpx; height: 200rpx; margin-right: 20rpx"
            ></video>
          </view>
        </view>
      </view>
      <view style="padding: 30rpx; background-color: white">
        <view><span style="color: red">*</span> 上传图片</view>
        <view style="display: flex; flex-wrap: wrap">
          <view
            @click="uploadImg"
            v-if="imgList.length != 9"
            style="
              height: 200rpx;
              width: 200rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 10rpx;
              border: 1rpx dashed gray;
              margin-right: 20rpx;
              margin-top: 20rpx;
            "
          >
            点击上传</view
          >
          <view
            v-for="(item, index) in imgList"
            :key="index"
            class=""
            style="
              height: 200rpx;
              width: 200rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 20rpx;
              margin-right: 20rpx;
              border-radius: 10rpx;
              border: 1rpx dashed gray;
            "
          >
            <image
              :src="item"
              mode=""
              style="width: 100%; height: 100%"
            ></image>
          </view>
        </view>
      </view>
      <view class="scan_count">
        <view class="scan_bg"></view>
        <view v-if="!iShidden" class="whiteBg">
          <view class="input">
            <input
              type="number"
              placeholder-class="placeholder"
              placeholder="请输入核销码"
              v-model="verify_code"
            />
            <text @tap="codeChange">搜索</text>
          </view>
          <!-- #ifdef MP || MP-WEIXIN || APP-PLUS -->
          <view class="bnt" @tap="scanCode">
            <text class="iconfont icon-saoma"></text>
            扫码核销
          </view>
          <!-- <view v-else class="bnt" @tap="getPre"
            ><text class="iconfont icon-saoma"></text>扫码核销</view
          > -->
          <!-- #endif -->
          <!-- #ifdef H5 -->

          <!-- #endif -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { orderVerific, getverifyOrder, verifierOrder } from "@/api/admin";
import { HTTP_REQUEST_URL } from "@/config/app";
export default {
  data() {
    return {
      domain: HTTP_REQUEST_URL,
      iShidden: false,
      verify_code: "",
      orderInfo: {},
      isWeixin: false,
      mer_id: "",
      downStatus: false,
      type: "customer",
      service: null,
      videoSrc: "",
      imgList: [],
    };
  },

  onLoad: function (options) {
    // #ifdef MP
    if (options.scene) {
      let value = this.$util.getUrlParams(
        decodeURIComponent(options.scene) || {}
      );
      if (value.verify_code) options.verify_code = value.verify_code;
      if (value.mer_id) options.mer_id = value.mer_id;
    }
    // #endif
    this.verify_code = options.verify_code;
    this.mer_id = options.mer_id;

    if (this.verify_code) {
      this.codeChange();
    }
    // #ifdef H5
    if (this.$wechat.isWeixin()) {
      this.isWeixin = true;
    }
    // #endif
  },
  methods: {
    uploadImg() {
      var that = this;
      console.log(0);
      // if (uni.getStorageSync("isUplod") == "1") {
      //   that.onISImg();
      // } else {
      uni.showModal({
        title: "相机权限使用说明:用于拍照、录制视频等场景",
        content: "是否允许租兀APP拍摄照片和录制视频",
        success: function (res) {
          if (res.confirm) {
            that.onISImg();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
      // }
    },
    onISImg() {
      var that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], //从相册选择
        success: function (res) {
          console.log(res);
          uni.uploadFile({
            url: "https://mer.syn.tswm.club/api/upload/image/file", //仅为示例，非真实的接口地址
            filePath: res.tempFilePaths[0],
            name: "file",
            success: (uploadFileRes) => {
              let result = JSON.parse(uploadFileRes.data).data.path;
              that.imgList.push(result);
              if (that.isWeixin == false) {
                if (that.videoSrc == "" || that.imgList.length == 0) {
                  that.isWeixin = false;
                } else {
                  that.isWeixin = true;
                }
              }
            },
            fail(err) {
              console.log(err);
            },
          });
        },
      });
    },
    uploadVideo() {
      var that = this;
      uni.showModal({
        title: "相机权限使用说明:用于拍照、录制视频等场景",
        content: "是否允许租兀APP拍摄照片和录制视频",
        success: function (res) {
          if (res.confirm) {
            that.onISviod();
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    onISviod() {
      var that = this;
      uni.chooseVideo({
        sourceType: ["camera"],
        success: function (res) {
          uni.uploadFile({
            url: "https://mer.syn.tswm.club/api/upload/video", //仅为示例，非真实的接口地址
            filePath: res.tempFilePath,
            name: "file",
            success: (uploadFileRes) => {
              that.videoSrc = JSON.parse(uploadFileRes.data).data.path;
              console.log(that.videoSrc);
              console.log(that.imgList.length);
              if (that.isWeixin == true) {
                if (that.videoSrc == "" || that.imgList.length == 0) {
                  that.isWeixin = false;
                } else {
                  that.isWeixin = true;
                }
              }
            },
            fail(err) {
              console.log(err);
            },
          });
        },
      });
    },

    /**
     * 去订单详情
     */
    goOrderDetails: function (id) {
      uni.navigateTo({
        url:
          "/pages/admin/orderDetail/index?id=" + id + "&mer_id=" + this.mer_id,
      });
    },
    changeTips(data) {
      this.downStatus = !this.downStatus;
      this.$refs.shopList.isShowStore();
    },
    changeClose() {
      this.downStatus = false;
    },
    // 立即核销
    codeChange: function () {
      let self = this;
      let imageList = self.imgList;
      // let image = imageList.join(",");
      // const params = {
      //   verify_code: self.verify_code,
      //   verify_img: image,
      //   verify_video: self.videoSrc,
      // };
      const params = self.verify_code;
      verifierOrder(self.mer_id, params)
        .then((res) => {
          console.log(res);
          let ref = /[0-9]/;
          if (!this.verify_code)
            return self.$util.Tips({
              title: "请输入核销码",
            });
          if (!ref.test(this.verify_code))
            return self.$util.Tips({
              title: "请输入正确的核销码",
            });
          console.log(this.verify_code);
          console.log(this.mer_id);
          console.log(res.data.order_id);
          uni.navigateTo({
            url:
              "/pages/admin/cancellate_result/index?code=" +
              this.verify_code +
              "&mer_id=" +
              this.mer_id +
              "&order_id=" +
              self.verify_code,
          });
        })
        .then((res) => {
          console.log(res);
        })
        .catch((res) => {
          return self.$util.Tips({
            title: res,
          });
        });
    },
    getPre() {
      var that = this;
      plus.android.requestPermissions(["android.permission.CAMERA"], (e) => {
        if (e.deniedAlways.length > 0) {
          // 弹出提示框解释为何需要权限，引导用户打开设置页面开启
          uni.showModal({
            title: "提示",
            content: "开启摄像头权限，以正常扫码核销订单",
            // showCancel: false, // 不显示取消按钮
            success(res) {
              if (res.confirm) {
                var Intent = plus.android.importClass("android.content.Intent");
                var Settings = plus.android.importClass(
                  "android.provider.Settings"
                );
                var Uri = plus.android.importClass("android.net.Uri");
                var mainActivity = plus.android.runtimeMainActivity();
                var intent = new Intent();
                intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                var uri = Uri.fromParts(
                  "package",
                  mainActivity.getPackageName(),
                  null
                );
                intent.setData(uri);
                mainActivity.startActivity(intent);
              }
            },
          });
        } else if (e.deniedPresent.length > 0) {
          //权限被临时拒绝
          // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
          uni.showModal({
            title: "提示",
            content: "开启摄像头权限，以正常扫码核销订单",
            // showCancel: false, // 不显示取消按钮
            success(res) {
              if (res.confirm) {
                var Intent = plus.android.importClass("android.content.Intent");
                var Settings = plus.android.importClass(
                  "android.provider.Settings"
                );
                var Uri = plus.android.importClass("android.net.Uri");
                var mainActivity = plus.android.runtimeMainActivity();
                var intent = new Intent();
                intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                var uri = Uri.fromParts(
                  "package",
                  mainActivity.getPackageName(),
                  null
                );
                intent.setData(uri);
                mainActivity.startActivity(intent);
              }
            },
          });
        } else {
          plus.android.requestPermissions(
            ["android.permission.READ_EXTERNAL_STORAGE"],
            (e) => {
              if (e.deniedAlways.length > 0) {
                //权限被永久拒绝
                // 弹出提示框解释为何需要权限，引导用户打开设置页面开启
                uni.showModal({
                  title: "提示",
                  content: "开启摄像头权限，以正常扫码核销订单",
                  // showCancel: false, // 不显示取消按钮
                  success(res) {
                    if (res.confirm) {
                      var Intent = plus.android.importClass(
                        "android.content.Intent"
                      );
                      var Settings = plus.android.importClass(
                        "android.provider.Settings"
                      );
                      var Uri = plus.android.importClass("android.net.Uri");
                      var mainActivity = plus.android.runtimeMainActivity();
                      var intent = new Intent();
                      intent.setAction(
                        Settings.ACTION_APPLICATION_DETAILS_SETTINGS
                      );
                      var uri = Uri.fromParts(
                        "package",
                        mainActivity.getPackageName(),
                        null
                      );
                      intent.setData(uri);
                      mainActivity.startActivity(intent);
                    }
                  },
                });
              } else if (e.deniedPresent.length > 0) {
                //权限被临时拒绝
                // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
                uni.showModal({
                  title: "提示",
                  content: "开启摄像头权限，以正常扫码核销订单",
                  // showCancel: false, // 不显示取消按钮
                  success(res) {
                    if (res.confirm) {
                      var Intent = plus.android.importClass(
                        "android.content.Intent"
                      );
                      var Settings = plus.android.importClass(
                        "android.provider.Settings"
                      );
                      var Uri = plus.android.importClass("android.net.Uri");
                      var mainActivity = plus.android.runtimeMainActivity();
                      var intent = new Intent();
                      intent.setAction(
                        Settings.ACTION_APPLICATION_DETAILS_SETTINGS
                      );
                      var uri = Uri.fromParts(
                        "package",
                        mainActivity.getPackageName(),
                        null
                      );
                      intent.setData(uri);
                      mainActivity.startActivity(intent);
                    }
                  },
                });
              } else {
                that.scanCode();
              }
            }
          );
        }
      });
    },
    // 扫码核销
    scanCode() {
      if (this.videoSrc == "" || this.imgList.length == 0) {
        return this.$util.Tips({
          title: "请上传文件",
        });
      } else {
        console.log("1");
        var self = this;
        // #ifdef MP || APP-PLUS
        wx.scanCode({
          scanType: ["qrCode", "barCode"],
          success(res) {
            self.verify_code = self.getDataBetweenStrings(res.result, "=", "&");
            uni.navigateTo({
              url:
                "/pages/admin/cancellate_result/index?cal_code=" +
                self.verify_code +
                "&mer_id=" +
                self.mer_id +
                "&order_id=" +
                self.verify_code,
            });
            // self.codeChange();
          },
          fail(res) {
            console.log(res);
          },
        });
        // #endif
        //#ifdef H5
        if (this.$wechat.isWeixin()) {
          this.$wechat
            .wechatEvevt("scanQRCode", {
              needResult: 1,
              scanType: ["qrCode", "barCode"],
            })
            .then((res) => {
              this.verify_code = self.getDataBetweenStrings(
                res.resultStr,
                "=",
                "&"
              );
              uni.navigateTo({
                url:
                  "/pages/admin/cancellate_result/index?cal_code=" +
                  self.verify_code +
                  "&mer_id=" +
                  self.mer_id +
                  "&order_id=" +
                  self.verify_code,
              });
              // this.codeChange();
            })
            .catch((res) => {
              this.$util.Tips({
                title: res,
              });
            });
        }
        //#endif
      }
    },
    getDataBetweenStrings(str, startStr, endStr) {
      const startIndex = str.indexOf(startStr);
      const endIndex = str.indexOf(endStr);
      if (startIndex >= 0 && endIndex >= 0 && startIndex < endIndex) {
        return str.substring(startIndex + startStr.length, endIndex);
      }
      return null;
    },
  },
};
</script>

<style lang="scss">
.page {
  // height: 100vh;
}
.OrderCancellation .header {
  padding-top: 30rpx;
  width: 100%;
  //   height: 520rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.OrderCancellation {
  width: 100%;
}
.OrderCancellation .title_bg {
  height: 90rpx;
  background: #e93323;
  width: 100%;
}
.OrderCancellation .scan_count {
  //   position: relative;
  //   top: -0rpx;
  width: 690rpx;
  margin: 0 auto;
}
.OrderCancellation .scan_bg {
  width: 100%;
  height: 70rpx;
  border-radius: 16rpx;
  background-image: url("");
  background-size: 100%;
  background-repeat: no-repeat;
}
.OrderCancellation .whiteBg {
  width: 640rpx;
  background-color: #fff;
  margin: -47rpx auto 0;
  padding-top: 60rpx;
  border-radius: 4rpx 4rpx 16rpx 16rpx;
  padding-bottom: 77rpx;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}
.OrderCancellation .whiteBg .placeholder {
  color: #282828;
  font-size: 40rpx;
}
.OrderCancellation .whiteBg .input {
  width: 580rpx;
  background: #f4f4f4;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
  padding: 0 100rpx 0 20rpx;
  border-radius: 10rpx;

  position: relative;
}
.OrderCancellation .whiteBg .input text {
  position: absolute;
  right: 20rpx;
  top: 30rpx;
  color: #666666;
  font-size: 32rpx;
}
.OrderCancellation .whiteBg .input input {
  font-size: 60rpx;
  color: #282828;
  line-height: 100rpx;
  height: 100rpx;
}
.OrderCancellation .whiteBg .bnt {
  font-size: 32rpx;
  color: #fff;
  width: 80%;
  height: 86rpx;
  border-radius: 43rpx;
  background: #ff6b00;
  text-align: center;
  line-height: 86rpx;
  margin: 60rpx auto 0 auto;
}
.OrderCancellation .whiteBg .bnt .icon-saoma {
  color: #ffffff;
  font-size: 30rpx;
  margin-right: 15rpx;
}
.OrderCancellation .scan {
  width: 300rpx;
  height: 300rpx;
  margin: 160rpx auto 0 auto;
}
.OrderCancellation .scan image {
  width: 100%;
  height: 100%;
  display: block;
}
.WriteOff {
  width: 640rpx;
  background-color: #fff;
  margin: -47rpx auto 0;
  padding: 24rpx 30rpx;
  border-radius: 4rpx 4rpx 16rpx 16rpx;
  padding-bottom: 77rpx;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.WriteOff .num {
  font-size: 28rpx;
  color: #282828;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 22rpx;
}
.WriteOff .num .see {
  font-size: 16rpx;
  color: #fff;
  border-radius: 4rpx;
  background-color: #c68937;
  padding-left: 5rpx;
  margin-left: 12rpx;
}
.WriteOff .num .see .iconfont {
  font-size: 15rpx;
}

.WriteOff .sure {
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  line-height: 86rpx;
  height: 86rpx;
  width: 580rpx;
  border-radius: 41rpx;
  margin: 40rpx auto 0 auto;
  background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
  background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
  background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
}
.WriteOff .sure.cancel {
  background-image: none;
  color: #666666;
  margin-top: 30rpx;
  border: 1px solid #bbbbbb;
}
.WriteOff .order_count scroll-view {
  max-height: 450rpx;
}
.WriteOff .order_count .order_list {
  margin-top: 30rpx;
  justify-content: space-between;
  align-items: center;
}
.WriteOff .order_list .pictrue {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
  }
}
.WriteOff .order_list .name {
  color: #282828;
  font-size: 28rpx;
}
.WriteOff .order_list .pro_name {
  width: 320rpx;
}
.WriteOff .order_list .price {
  color: #999999;
  font-size: 28rpx;
  text-align: right;
  line-height: 40rpx;
}
.WriteOff .order_list .btn-item {
  display: block;
  font-size: 24rpx;
  color: #e93323;
  margin-top: 16rpx;
}
.WriteOff .order_price {
  margin-top: 20rpx;
  text-align: right;
  font-size: 26rpx;
  text {
    color: #e93323;
    font-weight: bold;
  }
}
.views {
  font-size: 24rpx;
  color: #666666;
}
.views-jian {
  font-size: 10px;
}
.spin {
  display: block;
  transform: rotate(180deg);
  font-size: 36rpx;
}
.popupn {
  width: 100%;
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
  color: #fff;
  .title {
    background: rgba(0, 0, 0, 0.15);
    max-width: 360rpx;
    margin: 0 auto;
    position: relative;
    border-radius: 30rpx;
  }
  .iconfont {
    display: inline-block;
    position: relative;
    top: 4rpx;
    right: 0;
  }
  .mer_logo {
    width: 34rpx;
    height: 34rpx;
    position: relative;
    top: 6rpx;
    right: 10px;
  }
  .mer_name {
    display: inline-block;
    max-width: 650rpx;
  }
  .invoice-content {
    background-color: #ffffff;
  }
}
</style>
